<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <!-- <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <a-card hoverable>
          <a-card-meta title="未达成需求" description="This is the description">
            <a-avatar
              slot="avatar"
              src="https://ae01.alicdn.com/kf/H9e2f5c9029574d119d8aa8d9428c9cc5N.png"
            />
          </a-card-meta>
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <a-card hoverable>
          <a-card-meta title="已达成需求" description="This is the description">
            <a-avatar
              slot="avatar"
              src="https://ae01.alicdn.com/kf/H84f00eaac13144af80b9bb03b100e4b3d.png"
            />
          </a-card-meta>
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <a-card hoverable>
          <a-card-meta title="物资总数" description="This is the description">
            <a-avatar
              slot="avatar"
              src="https://ae01.alicdn.com/kf/Ha434883f4ff34e1595ead10e965a19b8q.png"
            />
          </a-card-meta>
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <a-card hoverable>
          <a-card-meta title="在库医院信息" description="This is the description">
            <a-avatar
              slot="avatar"
              src="https://ae01.alicdn.com/kf/H102e205c797f4618ab64d63cc61dc7b3c.png"
            />
          </a-card-meta>
        </a-card>
      </a-col> -->
      <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card :bordered="false" title="各类物资需求明细" :style="{ height: '100%' }">
          <div id="demand"></div>
        </a-card>
      </a-col>
      <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card :bordered="false" title="各类物资需求明细" :style="{ height: '100%' }">
          <div id="percent"></div>
        </a-card>
      </a-col>
      <a-divider></a-divider>
      <!-- <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card :bordered="false" title="医院所在城市占比" :style="{ height: '100%' }">
          <div id="hospital"></div>
        </a-card>
      </a-col>
      <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card :bordered="false" title="医院所在城市占比" :style="{ height: '100%' }">
          <div id="hospitalMap"></div>
        </a-card>
      </a-col>
      <a-divider></a-divider> -->
    </a-row>
  </div>
</template>

<script>
import G2 from '@antv/g2/build/g2'

export default {
  data () {
    return {
      hospitalMapData: [
        { type: '一线城市', value: 0.19 },
        { type: '二线城市', value: 0.21 },
        { type: '三线城市', value: 0.27 },
        { type: '四线及以下', value: 0.33 }
      ],
      hospitalData: [
        {
          type: '登记', value: '400+'
        },
        {
          type: '录入', value: '232'
        }
      ],
      demandDetailData: [
        { type: '手套', value: 203000, unit: '双' },
        { type: '医用帽', value: 30000, unit: '个' },
        { type: '鞋套', value: 20000, unit: '双' },
        { type: '食物', value: 6500, unit: '份' },
        { type: '洗手液', value: 6000, unit: '瓶' },
        { type: 'N95口罩', value: 3000, unit: '个' },
        { type: '防护服', value: 630, unit: '套' },
        { type: '护目镜', value: 108, unit: '个' },
        { type: '消毒液', value: 474, unit: '桶' }
      ],
      demandData: [
        { sex: '男', sold: 0.45 },
        { sex: '女', sold: 0.55 }
      ]
    }
  },
  methods: {
    drawHospitalMap (data, container) {
      const chart = new G2.Chart({
        container: container,
        forceFit: true,
        height: 500,
        padding: 'auto'
      })
      chart.source(data)
      chart.legend(false)
      chart.coord('theta', {
        radius: 0.75
      })
      const pie = chart.intervalStack().position('value').color('type', [ '#063d8a', '#1770d6', '#47abfc', '#38c060' ])
        .style({ opacity: 0.4 })
        .select(true, {
          style: {
            stroke: 'black',
            lineWidth: 2,
            opacity: 1
          }
        })
        .label('type', val => {
          const opacity = (val === '四线及以下') ? 1 : 0.5
          return {
            offset: -30,
            textStyle: {
              opacity,
              fill: 'white',
              fontSize: 12,
              shadowBlur: 2,
              shadowColor: 'rgba(0, 0, 0, .45)'
            },
            formatter: (text, item) => {
              const d = item.point
              return d.type + '\n' + d.value + '%'
            }
          }
        })
      chart.render()
      pie.setSelected(data[0])
      chart.on('afterpaint', () => {
        pie.setSelected(data[0])
      })
    },
    drawDemand (data, container) {
      const { Shape } = G2
      Shape.registerShape('interval', 'radiusPie', {
        draw (cfg, container) {
          // 将归一化后的数据转换为画布上的坐标
          const points = cfg.origin.points
          let path = []
          for (let i = 0; i < cfg.origin.points.length; i += 4) {
            path.push([ 'M', points[i].x, points[i].y ])
            path.push([ 'L', points[i + 1].x, points[i + 1].y ])
            path.push([ 'L', points[i + 2].x, points[i + 2].y ])
            path.push([ 'L', points[i + 3].x, points[i + 3].y ])
            path.push([ 'L', points[i].x, points[i].y ])
            path.push([ 'z' ])
          }
          path = this.parsePath(path, true)
          const rect = container.addShape('path', {
            attrs: {
              fill: cfg.color || '#00D9DF',
              path
            }
          })
          const minH = Math.min(path[1][7], path[2][2])
          const minW = Math.min(path[1][6], path[2][1])
          const diffH = Math.abs(path[1][7] - path[2][2])
          const diffW = Math.abs(path[1][6] - path[2][1])
          container.addShape('circle', {
            attrs: {
              x: minW + diffW / 2,
              y: minH + diffH / 2,
              fill: cfg.color,
              radius: diffH / 2
            }
          })

          const minHH = Math.min(path[3][7], path[4][2])
          const minWW = Math.min(path[3][6], path[4][1])
          const diffHH = Math.abs(path[3][7] - path[4][2])
          const diffWW = Math.abs(path[3][6] - path[4][1])
          container.addShape('circle', {
            attrs: {
              x: minWW + diffWW / 2,
              y: minHH + diffHH / 2,
              fill: cfg.color,
              radius: diffH / 2
            }
          })
          return rect
        }
      })

      const chart = new G2.Chart({
        container: 'container',
        forceFit: true,
        height: 500,
        padding: [ 20, 30, 30, 20 ]
      })

      const COLORS = [ '#1890ff', '#f04864' ]

      chart.coord('theta', {
        radius: 0.8
      })
      chart.source(data)
      chart.tooltip({
        showTitle: false
      })
      chart.intervalStack()
        .position('sold')
        .shape('radiusPie')
        .color('sex', COLORS)
        .label('sold', {
          useHtml: true,
          htmlTemplate: (text, item) => {
            const isFemale = item.sex === '女'
            const src = isFemale ? 'https://gw.alipayobjects.com/zos/rmsportal/mweUsJpBWucJRixSfWVP.png'
              : 'https://gw.alipayobjects.com/zos/rmsportal/oeCxrAewtedMBYOETCln.png'
            const color = isFemale ? COLORS[1] : COLORS[0]
            const IMG = `<img style="width:40px" src="${src}" /><br/>`
            return `<div style="text-align:center;color:${color}">${IMG}${(text * 100).toFixed(0)}%</div>`
          }
        })

      chart.render()
    },
    drawTest (data, container) {
      const chart = new G2.Chart({
        container: container,
        forceFit: true,
        height: 500,
        padding: [ 40, 0 ]
      })

      chart.source(data)
      chart.coord('theta', {
        startAngle: 0, // 起始角度
        endAngle: Math.PI * 2 // 结束角度
      })
      chart.tooltip({
        showTitle: false,
        itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
      })
      chart.intervalStack()
        .position('value')
        .color('type')
        .label('type', {
          formatter: (val, item) => {
            return val + ': ' + item.point.value + item.point.unit
          }
        })
        .tooltip('type*value*unit', (type, value, unit) => {
          return {
            name: type,
            value: value + unit
          }
        })
      chart.render()
    },
    drawPercent () {
      const data = [
        { question: '未成功送达', value: 137100, percent: '46%' },
        { question: '成功送达', value: 157974, percent: '54%' },
        { question: '共计发货', value: 295074, percent: '' }
      ]
      const chart = new G2.Chart({
        container: 'percent',
        forceFit: true,
        height: 500
      })
      chart.source(data, {
        value: { min: 0, max: 290000 }
      })
      chart.tooltip({
        showTitle: false
      })
      chart.legend(false)
      chart.coord('polar', { innerRadius: 0.1 }).transpose()
      chart.interval()
        .position('question*value')
        .color('value', '#BAE7FF-#1890FF-#0050B3')
        .tooltip('value*question', (val, question) => {
          return {
            name: question,
            value: val + '件'
          }
        })
        .label('percent', {
          offset: -5
        })
      data.map(obj => {
        chart.guide().text({
          position: [ obj.question, 0 ],
          content: obj.question + ' ',
          style: {
            textAlign: 'right'
          }
        })
        return null
      })
      chart.render()
    }
  },
  mounted () {
    this.drawTest(this.demandDetailData, 'demand')
    this.drawPercent()
  }
}
</script>
